<template>
  <div>
    <header id="toolbar">
        <ul class="clearfix">
            <li class="back_arrow" @click="back"><van-icon name="arrow-left"  /></li>
            <li class="more_play"> 
                <span class="more_white"></span>
                <span class="in_play"></span>
            </li>
        </ul>
    </header>
  </div>
</template>
<script>
  export default {
    name: 'Header',
    data(){
      return{

      }
    },
    methods:{
      //返回上一层
      back(){
          this.$router.go(-1);//返回上一层
      },
      //注销
      logout(){
        const  that = this;
        //删除cookie并跳到登录页
        that.isLoging = true;//加载loading
        that.delCookie('session');
        //注销时  清除sessionStorage里面的数据
        sessionStorage.removeItem('userInfos');

        //演示
        setTimeout(()=>{
          that.$router.push('/login');
          that.isLoging = false;//去掉loading
        },1500)
      },
    }
  }
</script>
<style scoped lang="less">
   header{
        height: 50px;
        line-height: 50px;
        color: #fff;
        z-index: 4;
        position: fixed;
        top: 0;
        width: 100%;
        ul{
            li{
                width: 50%;
                color: #fff;
                float: left;
            }
            .more_play{
                text-align: right;
                float: right;
                span{
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    background-position: 0;
                    background-repeat: no-repeat;
                    background-size: 18px 18px;
                    vertical-align: middle;
                    margin-right: 20px;
                }
                .more_white{
                    background-image:url('../images/wyy/more_white.svg')
                }
                .in_play{
                    background-image:url('../images/wyy/in_play.svg')
                }
            }
            .back_arrow{
                i{
                    font-size: 20px;
                    vertical-align: middle;
                    padding-left: 10px;

                }
            }
        }
    }
</style>
